<template>
  <el-container class="home_con">
    <el-header class="sun-header">
      <div @click="fhHome">
        <img src="../assets/logo-sunpx.png" alt/>
        <span>{{$t("home.title")}}</span>
      </div>
      <div>
        <el-row  style="display: flex;align-items: center; cursor:pointer">
          <el-col style="width: 100px;">
           <div style="display: flex" @click="setUpLanguage">
             <img src="../assets/image/not_selected.png" alt="" width="20" height="20">
             <span style="font-size: 13px">{{this.language==='zh_CN'?"简体中文":"English"}}</span>
           </div>
          </el-col>

          <el-col  style="width: 120px;">
            <el-dropdown style="margin-left: 10px" trigger="click">

              <div class="el-dropdown-link">

                <img :src="$baseURL+userNameAll.imgUrl" style="border-radius: 50%" alt="" width="40" height="40">
                <div style="margin-left: 5px;">{{ userNameAll.name }}</div>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="getPersonalCenter">个人中心</el-dropdown-item>
                <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-container  class="sunpx">
      <el-aside  :width="isColl ? '64px':'200px'" style="height:calc(100% - 20px)">
        <div class="toggle_clike" @click="coll">|||</div>

        <!--              background-color="#EEEEE"-->
        <!-- 菜单 -->
        <el-menu
            text-color="#314a43"
            active-text-color="#459DF7"
            :unique-opened="true"
            :collapse="isColl"
            :collapse-transition="false"
            :router="true"
            :default-active="pathth"
        >

          <el-menu-item index="/welcome" key="welcome">
            <i class="el-icon-house"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu :index="'/'+mode.id" v-for="mode in modelist" :key="mode.id">
            <!-- 一级目录 -->
            <template slot="title">
              <i :class="mode.icon"></i>
              <span> {{ mode.menuName }}</span>
            </template>
            <!-- 二级目录 -->
            <el-menu-item
                :index="'/'+itme.menuPath"
                v-for="itme in mode.children"
                :key="itme.id"
                @click="getPath('/'+itme.menuPath)"
            >
              <template slot="title">
                <i :class="itme.icon"></i>
                <span>{{ itme.menuName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main style="overflow:auto;">
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>
<script>
import {mapState} from 'vuex'
import {initRouter} from '../router/index'

export default {
  data() {
    return {
      drawer: false,
      modelist: [],
      isColl: true,
      pathth: '',
      userNameAll: '',
      socket: '',
      sendHTML: {},
      classInfo: "info",
      isXS: false
    }
  },
  methods: {
    loginOut() {
      window.sessionStorage.clear()
      window.location.reload
      this.$router.push('/login')
    },
    getModeList() {
      this.pathth = window.sessionStorage.getItem('path')
    },
    coll() {
      this.isColl = !this.isColl
    },
    getPath(pathAll) {
      window.sessionStorage.removeItem('path')
      window.sessionStorage.setItem('path', pathAll)
      this.pathth = pathAll
    },
    getPersonalCenter() {
      this.$router.push('/personalCenter')
    },
    fhHome() {
      this.$router.push('/welcome')
    },
    setUpLanguage() {
      if (this.language === null || this.language === undefined) {
        this.$store.commit("setLanguage", this.$i18n.locale)
        return
      }
      let item= this.language==='zh_CN'?'en_US':'zh_CN'
      this.$i18n.locale =item;
      this.$store.commit("setLanguage", item)
    }
  },
  created() {
    initRouter()
    this.getModeList()
    this.modelist = this.modueList
    this.userNameAll = this.userInfo
    this.$i18n.locale=this.language
  },
  computed: {
    ...mapState(['modueList', 'userInfo','language'])
  }

}
</script>
<style lang="less" scoped>
.sunpx{
  position:absolute;
  height:calc(100% - 60px) ;
  margin-top: 60px;
  width: 100%;
}
.el-header {
  //position:fixed;
  //top: 0;
  //bottom:0;
  //z-index: 999;
  //width: 100%;
  //background-color: #1D1C2E;
  background-color: #525288;
  border-bottom: 1px solid #e6d2d5;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #ffffff;
  font-size: 20px;

  > div {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
    }
  }
}

.el-aside {
  //background-color: #252241;
  //background-color: #EEEEEE;

  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: white;
  border-left: 1px solid #e6d2d5;

}

.home_con {
  height: 100%;
}

.toggle_clike {
  background-color: #c0c4c3;
  //background-color: #040229;
  font-size: 10px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #5f87ce;

  i {
    color: white;
  }

  /*span{*/
  /*    white-space: nowrap;*/
  /*    text-overflow: ellipsis;*/
  /*    overflow: hidden;*/
  /*}*/
}

.slsls {
  //width: 20%;
  //height: 100%;
  display: flex;
  justify-content: center;
}

//.sun_tag{
//  background: #1D1C2E;
//  width: 10%;
//  display: flex;
//  justify-content: center;
//}
</style>
